<template>
    <div>
        <div class="topImg">
            <img :src="image" alt="" data-aos="fade" data-aos-duration="1000">
            <span>新闻动态</span>
        </div>
        <div class="page_content">
            <a :href="getHref({path:'/newDetail',query:{id:item.id}})" class="info" data-aos="fade" data-aos-duration="1000" v-for="item in list" :key="item.id"
                @click="goPage($event, item.id)">
                <div>
                    <img :src="item.thumb" alt="">
                </div>
                <span class="line1">{{ item.post_title }}</span>
            </a>

        </div>
        <div class="pagination">
            <el-pagination background layout="prev, pager, next" :total="total" :page-size="4"
                @current-change="getChange">
            </el-pagination>
        </div>
    </div>
</template>

<script>

export default {
    data() {
        return {
            dialogVisible: false,
            list: [],
            totalPage: 1,
            pageNum: 1,
            loading: false,
            image: '',
            total: ''
        }
    },
    mounted() {
        this.getList()
        this.getImage()
        window.addEventListener('scroll', this.handleScroll); // 监听滚动事件
    },
    beforeDestroy() {
        window.removeEventListener('scroll', this.handleScroll); // 移除监听
    },
    methods: {
        goPage(e, id) {
            e.preventDefault();
            this.$router.push({
                path: '/newDetail',
                query: {
                    id,
                }
            })
            this.$emit('close')
        },
        getChange(e) {
            this.list = []
            this.pageNum = e
            this.getList()

        },
        getImage() {
            this.$api.getBanner({
                slide_id: 4,
                limit: 1
            }).then(res => {
                if (res.code == 1) {
                    this.image = res.data.image
                }
            })
        },
        getHref(route) {
            const resolved = this.$router.resolve(route);
            return resolved.href;
        },
        getList() {
            this.loading = true
            this.$api.getNews({
                class_id: 1,
                page: this.pageNum
            }).then(res => {
                if (res.code == 1) {
                    this.totalPage = res.data.last_page
                    this.total = res.data.total
                    this.list = this.list.concat(res.data.data);
                    this.loading = false
                }

            })
        },

    }
}
</script>

<style lang="scss" scoped>
.topImg {
    position: relative;

    img {
        width: 100%;
        height: auto;
    }

    span {
        position: absolute;
        bottom: calc(50% - 40px);
        left: 270px;
        font-weight: bold;
        font-size: 85px;
        color: #FFFFFF;
        font-family: MiSans;
    }
}

.page_content {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 40px;

    .info {
        cursor: pointer;
        margin-bottom: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        width: 798px;
        height: 580px;
        overflow: hidden;
text-decoration: none;
        div {
            height: 507px;
            width: 100%;
            overflow: hidden;

            img {
                -o-object-fit: cover;
                object-fit: cover;
                -o-object-position: center center;
                object-position: center center;
                width: 100%;
                height: 507px;

                &:hover {
                    transform-origin: center center;
                    transform: scale(1.2);
                    transition: all 1.3s;
                }
            }
        }


        span {
            font-family: Microsoft YaHei;
            font-weight: 400;
            font-size: 30px;
            color: #2B2B2B;
            margin-top: 32px;
        }
    }

    padding: 30px 130px;
}

.pagination {
    display: flex;
    margin: 50px 0;
    justify-content: center;
    width: 100%;
}

@media screen and (max-width: 768px) {
    .pagination {
        display: flex;
        margin: 0;
        height: 15px;
        justify-content: center;
        width: 100%;
        zoom: 3;
    }

    .page_content .info {
        height: 250px;
        width: 100%;

        div {
            width: 100%;
            height: 250px;

            img {
                width: 100%;
                height: 250px;
            }
        }

        span {
            font-size: 15px;
        }
    }
}
</style>